{"_id":"@amilajack/react-progressive-bg-image","_rev":"3-486a55505a094698dc1251ff5e41ae22","name":"@amilajack/react-progressive-bg-image","dist-tags":{"latest":"3.0.2"},"versions":{"3.0.0":{"name":"@amilajack/react-progressive-bg-image","version":"3.0.0","description":"Medium style progressive background image for React","author":{"name":"Michael Hsu","email":"evenchange4@gmail.com"},"license":"MIT","typings":"./index.d.ts","main":"lib/index.js","scripts":{"clean":"rm -rf lib","prebuild":"npm run clean","build":"NODE_ENV=production babel src --out-dir lib --ignore '**/*.example.js,**/__tests__/*'","test":"NODE_ENV='test' jest --coverage --runInBand","test:watch":"npm run test -- --watch","start":"start-storybook -p 6006","build-storybook":"build-storybook","eslint":"eslint ./","flow":"flow","precommit":"lint-staged","format":"prettier --write 'src/**/*.js' '.storybook/*.js' '*.{md,json}'","changelog":"github-changes -o evenchange4 -r react-progressive-bg-image -b master -f ./CHANGELOG.md --order-semver --use-commit-body"},"dependencies":{"prop-types":"^15.6.0","ramda":"^0.25.0","recompose":"^0.26.0","rxjs":"^5.5.6"},"devDependencies":{"@storybook/addon-info":"3.3.12","@storybook/addon-options":"3.3.12","@storybook/addon-storyshots":"3.3.12","@storybook/react":"3.3.12","babel-cli":"6.26.0","babel-eslint":"8.2.1","babel-preset-env":"1.6.1","babel-preset-react-app":"3.1.1","codecov":"3.0.0","enzyme":"3.3.0","enzyme-adapter-react-16":"1.1.1","enzyme-to-json":"3.3.1","eslint":"4.17.0","eslint-config-airbnb":"16.1.0","eslint-config-prettier":"2.9.0","eslint-plugin-flowtype":"2.42.0","eslint-plugin-import":"2.8.0","eslint-plugin-jest":"21.7.0","eslint-plugin-jsx-a11y":"6.0.3","eslint-plugin-prettier":"2.6.0","eslint-plugin-react":"7.6.1","flow-bin":"0.65.0","github-changes":"1.1.2","husky":"0.14.3","jest":"22.1.4","jest-styled-components":"next","lint-staged":"6.1.0","normalize.css":"8.0.0","prettier":"1.10.2","react":"16.2.0","react-dom":"16.2.0","react-test-renderer":"16.2.0","styled-components":"3.1.4"},"babel":{"presets":["react-app",["babel-preset-env",{"targets":{"node":"current"}}]]},"jest":{"setupTestFrameworkScriptFile":"<rootDir>/setupTests.js","collectCoverageFrom":["src/**/*.js","!src/**/*.test.js","!src/**/*.example.js"],"testPathIgnorePatterns":["<rootDir>/node_modules/","<rootDir>/lib/"],"snapshotSerializers":["enzyme-to-json/serializer"],"resetMocks":true,"resetModules":true},"prettier":{"trailingComma":"all","singleQuote":true},"lint-staged":{"*.{js,json,md}":["prettier --write","git add"]},"eslintConfig":{"parser":"babel-eslint","extends":["airbnb","plugin:flowtype/recommended","plugin:jest/recommended","prettier","prettier/react","prettier/flowtype"],"plugins":["prettier","jest","flowtype"],"env":{"browser":true,"jest/globals":true},"rules":{"react/jsx-filename-extension":[1,{"extensions":[".js"]}],"import/no-extraneous-dependencies":0,"jsx-a11y/no-static-element-interactions":0,"react/forbid-prop-types":0,"react/require-default-props":0,"prettier/prettier":"error"}},"eslintIgnore":["node_modules","coverage","storybook-static","lib","flow-typed"],"bugs":{"url":"https://github.com/evenchange4/react-progressive-bg-image/issues","email":"evenchange4@gmail.com"},"homepage":"https://github.com/evenchange4/react-progressive-bg-image#readme","repository":{"type":"git","url":"git+https://github.com/evenchange4/react-progressive-bg-image.git"},"gitHead":"cada162c276bafacd20f2a4a6753116b05f0c318","_id":"@amilajack/react-progressive-bg-image@3.0.0","_npmVersion":"6.5.0","_nodeVersion":"11.9.0","_npmUser":{"name":"amilajack","email":"amilajack@gmail.com"},"dist":{"integrity":"sha512-GfjyDvYGT4otSsaDFazJPNP9c7XpItbQ4DPDnjRO6kqHLmrqNQtrewAfTi5GFJc4axeGcW411WsM/dZSvVSa7A==","shasum":"04ced5b8490046dce88a4ccf9f86bedfd211c8cf","tarball":"https://registry.npmjs.org/@amilajack/react-progressive-bg-image/-/react-progressive-bg-image-3.0.0.tgz","fileCount":10,"unpackedSize":35390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZ0kKCRA9TVsSAnZWagAA2l8P/1zB5XTFbIAGpIlreKw6\nwJr2RslYJqhc6tfogsocH557dYFqaeb/BwzAnWPEnpUNTNlae7L91oeUmrOI\n06VF3y3iavXlJyR+fEgaYA7Cu0kPAjGK+wEJJnkx0VfZpaBZacIoBezAni5Z\numUZGbho+SOvWPSr9JEWHK12HfQeIRCst7J8HjzzwhMRXzV8gc12gM4taMtN\nGvwY1IyH1FFk2wDrCklsYOS9d/aVHI468AfeikLDOA3KJDTdOlbaHnWHg8YX\nT5CvVFzRHsp9GdTAcHyYqZLVILu8a1XXHq0hfByNX/rqhQzGV7KJ4nayPoA9\nIVrCOn8VJy9QFOsVazUKZvVy1/0YK5t8DlPIDSXrRD8XlZg8huYqTgBY/ISR\nxmwABcwPRWUrR0GeJ0gZZou2RXVKzf7aW2aBDJ/wEDPe2TH7tOf0HH9+cF7P\nIP+Gh7B7lUe4S30SfoieiTbeNfaqRUo+o03JVEfy6KdTBTfUhyWTwM1147N9\nAImpLCFMnYifUC0BgLoGcc+nF8gRBH04gxRwB3ua6MflsBC3t3e2DmDSHa5g\npWtm1J0+AmJev8+TaiziybbJCVdW+Z+zVqkKE1B6ztnuVapQ6+hkCxrlgjnl\nLotmm+P3MA904ac6BkY0UZFM6WAaho5oFvK5KMEmMdmopJc8OznIpwCr9BnY\n+C+q\r\n=fVsY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAO1ivCbp7/KPh9UNMRMbWo/RjzB64Q0KsPAKgIosfztAiBgMZslwAB1L9QKCUC6fbcUMiBZsVXwNCw4MSwy8d33WA=="}]},"maintainers":[{"name":"amilajack","email":"amilajack@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-progressive-bg-image_3.0.0_1550272777287_0.1600797398055369"},"_hasShrinkwrap":false},"3.0.1":{"name":"@amilajack/react-progressive-bg-image","version":"3.0.1","description":"Medium style progressive background image for React","author":{"name":"Michael Hsu","email":"evenchange4@gmail.com"},"license":"MIT","typings":"./index.d.ts","main":"lib/index.js","scripts":{"clean":"rm -rf lib","prebuild":"npm run clean","build":"NODE_ENV=production babel src --out-dir lib --ignore '**/*.example.js,**/__tests__/*'","test":"NODE_ENV='test' jest --coverage --runInBand","test:watch":"npm run test -- --watch","start":"start-storybook -p 6006","build-storybook":"build-storybook","eslint":"eslint ./","flow":"flow","precommit":"lint-staged","format":"prettier --write 'src/**/*.js' '.storybook/*.js' '*.{md,json}'","changelog":"github-changes -o evenchange4 -r react-progressive-bg-image -b master -f ./CHANGELOG.md --order-semver --use-commit-body"},"dependencies":{"prop-types":"^15.6.0","ramda":"^0.25.0","recompose":"^0.26.0","rxjs":"^5.5.6"},"devDependencies":{"@storybook/addon-info":"3.3.12","@storybook/addon-options":"3.3.12","@storybook/addon-storyshots":"3.3.12","@storybook/react":"3.3.12","babel-cli":"6.26.0","babel-eslint":"8.2.1","babel-preset-env":"1.6.1","babel-preset-react-app":"3.1.1","codecov":"3.0.0","enzyme":"3.3.0","enzyme-adapter-react-16":"1.1.1","enzyme-to-json":"3.3.1","eslint":"4.17.0","eslint-config-airbnb":"16.1.0","eslint-config-prettier":"2.9.0","eslint-plugin-flowtype":"2.42.0","eslint-plugin-import":"2.8.0","eslint-plugin-jest":"21.7.0","eslint-plugin-jsx-a11y":"6.0.3","eslint-plugin-prettier":"2.6.0","eslint-plugin-react":"7.6.1","flow-bin":"0.65.0","github-changes":"1.1.2","husky":"0.14.3","jest":"22.1.4","jest-styled-components":"next","lint-staged":"6.1.0","normalize.css":"8.0.0","prettier":"1.10.2","react":"16.2.0","react-dom":"16.2.0","react-test-renderer":"16.2.0","styled-components":"3.1.4"},"jest":{"setupTestFrameworkScriptFile":"<rootDir>/setupTests.js","collectCoverageFrom":["src/**/*.js","!src/**/*.test.js","!src/**/*.example.js"],"testPathIgnorePatterns":["<rootDir>/node_modules/","<rootDir>/lib/"],"snapshotSerializers":["enzyme-to-json/serializer"],"resetMocks":true,"resetModules":true},"prettier":{"trailingComma":"all","singleQuote":true},"lint-staged":{"*.{js,json,md}":["prettier --write","git add"]},"eslintConfig":{"parser":"babel-eslint","extends":["airbnb","plugin:flowtype/recommended","plugin:jest/recommended","prettier","prettier/react","prettier/flowtype"],"plugins":["prettier","jest","flowtype"],"env":{"browser":true,"jest/globals":true},"rules":{"react/jsx-filename-extension":[1,{"extensions":[".js"]}],"import/no-extraneous-dependencies":0,"jsx-a11y/no-static-element-interactions":0,"react/forbid-prop-types":0,"react/require-default-props":0,"prettier/prettier":"error"}},"eslintIgnore":["node_modules","coverage","storybook-static","lib","flow-typed"],"bugs":{"url":"https://github.com/evenchange4/react-progressive-bg-image/issues","email":"evenchange4@gmail.com"},"homepage":"https://github.com/evenchange4/react-progressive-bg-image#readme","repository":{"type":"git","url":"git+https://github.com/evenchange4/react-progressive-bg-image.git"},"gitHead":"cada162c276bafacd20f2a4a6753116b05f0c318","_id":"@amilajack/react-progressive-bg-image@3.0.1","_nodeVersion":"11.9.0","_npmVersion":"6.8.0","dist":{"integrity":"sha512-XOyeL24Q2p1sOR73/dMjAxA38gPvAhys8NP8l/nvi8mQ5tV5zn9Z5uy1gk8nTasdRFDRy+x3iG8J3xYuKkPa9g==","shasum":"d58326fa8d800ade9cae60b7319102491d0f097e","tarball":"https://registry.npmjs.org/@amilajack/react-progressive-bg-image/-/react-progressive-bg-image-3.0.1.tgz","fileCount":10,"unpackedSize":35208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZ1fzCRA9TVsSAnZWagAAsqIQAJ2MQRnf0eKBpQK4QzuF\nfLWmfnXQFr52cOfG7mJRo47ZzDYP2fnEe/QCnx4fWcDi5Z0d2MoW4oeVwLgO\nhpKZqYoUrBNTrvd/uRyc+GFk5ZJfOmUJtrKtfFNpvLj6vnyJ9NzJLK0F+58Y\n/OLVG1b8m3qgjuB4KGPIctkdlPDnWO1y/PW3WzIfrP4bb3ib/qwPeqe+nUMr\n9SBRc+9635x7ldVYhkchgULvlO25Enr+d5CiP3fmwk4OzdCQbVPAnsJTz3Jz\nPBaUcTy+b7scZJMAkV+OOWiYa/opZUB7Rk23l+cv0lxin9uULPaFum84t+8u\nPMg9gRQ+Ek415N7I4TUBz9PgzknT19PJlth94P6FmdmBinVgVJHpEDipONl1\nKizxKa1glacVVUvaa5V+CZ18h7vkLjuszHjx4t9JQofzuW+Xtq6fphH9uRlq\n8ItZ9lHZJKxpod67ELZMQtgt3f1DGcM+gQgcncrdzgPezdKqw29lN0MHA+X8\n/KnbSsbBsguqzhdc7gni87LmWsgcMAFZ3lDSJ1+lg+Dybt8lT5bES9hhFD5W\nPOETkfsiWLVGZ58fs7DfWkSejhG4n1Qe8CrB3Vre2QcO7bumCrv/b1eMaZsj\nyFT5hYO6kQmBI/fwsoyrWT3ZXF4a5aqBXIhpKQiQpBXypW4bWB9cvm07zxqN\nO54a\r\n=a91R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHtv65iV27/9mnw8RnJDHXb0uFUrQu5FqBg0nbyR6YhUAiBANq6oh2uSrZgWW1GVDb8QeUFww6p/EPz+aEVSbeN6Yw=="}]},"maintainers":[{"name":"amilajack","email":"amilajack@gmail.com"}],"_npmUser":{"name":"amilajack","email":"amilajack@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-progressive-bg-image_3.0.1_1550276594834_0.5085586966148694"},"_hasShrinkwrap":false},"3.0.2":{"name":"@amilajack/react-progressive-bg-image","version":"3.0.2","description":"Medium style progressive background image for React","author":{"name":"Michael Hsu","email":"evenchange4@gmail.com"},"license":"MIT","typings":"./index.d.ts","main":"lib/index.js","scripts":{"clean":"rm -rf lib","prebuild":"npm run clean","build":"NODE_ENV=production babel src --out-dir lib --ignore '**/*.example.js,**/__tests__/*'","test":"NODE_ENV='test' jest --coverage --runInBand","test:watch":"npm run test -- --watch","start":"start-storybook -p 6006","build-storybook":"build-storybook","eslint":"eslint ./","flow":"flow","precommit":"lint-staged","format":"prettier --write 'src/**/*.js' '.storybook/*.js' '*.{md,json}'","changelog":"github-changes -o evenchange4 -r react-progressive-bg-image -b master -f ./CHANGELOG.md --order-semver --use-commit-body"},"dependencies":{"prop-types":"^15.6.0","ramda":"^0.25.0","recompose":"^0.26.0","rxjs":"^5.5.6"},"devDependencies":{"@storybook/addon-info":"3.3.12","@storybook/addon-options":"3.3.12","@storybook/addon-storyshots":"3.3.12","@storybook/react":"3.3.12","babel-cli":"6.26.0","babel-eslint":"8.2.1","babel-preset-env":"1.6.1","babel-preset-react-app":"3.1.1","codecov":"3.0.0","enzyme":"3.3.0","enzyme-adapter-react-16":"1.1.1","enzyme-to-json":"3.3.1","eslint":"4.17.0","eslint-config-airbnb":"16.1.0","eslint-config-prettier":"2.9.0","eslint-plugin-flowtype":"2.42.0","eslint-plugin-import":"2.8.0","eslint-plugin-jest":"21.7.0","eslint-plugin-jsx-a11y":"6.0.3","eslint-plugin-prettier":"2.6.0","eslint-plugin-react":"7.6.1","flow-bin":"0.65.0","github-changes":"1.1.2","husky":"0.14.3","jest":"22.1.4","jest-styled-components":"next","lint-staged":"6.1.0","normalize.css":"8.0.0","prettier":"1.10.2","react":"16.2.0","react-dom":"16.2.0","react-test-renderer":"16.2.0","styled-components":"3.1.4"},"jest":{"setupTestFrameworkScriptFile":"<rootDir>/setupTests.js","collectCoverageFrom":["src/**/*.js","!src/**/*.test.js","!src/**/*.example.js"],"testPathIgnorePatterns":["<rootDir>/node_modules/","<rootDir>/lib/"],"snapshotSerializers":["enzyme-to-json/serializer"],"resetMocks":true,"resetModules":true},"prettier":{"trailingComma":"all","singleQuote":true},"lint-staged":{"*.{js,json,md}":["prettier --write","git add"]},"eslintConfig":{"parser":"babel-eslint","extends":["airbnb","plugin:flowtype/recommended","plugin:jest/recommended","prettier","prettier/react","prettier/flowtype"],"plugins":["prettier","jest","flowtype"],"env":{"browser":true,"jest/globals":true},"rules":{"react/jsx-filename-extension":[1,{"extensions":[".js"]}],"import/no-extraneous-dependencies":0,"jsx-a11y/no-static-element-interactions":0,"react/forbid-prop-types":0,"react/require-default-props":0,"prettier/prettier":"error"}},"eslintIgnore":["node_modules","coverage","storybook-static","lib","flow-typed"],"bugs":{"url":"https://github.com/evenchange4/react-progressive-bg-image/issues","email":"evenchange4@gmail.com"},"homepage":"https://github.com/evenchange4/react-progressive-bg-image#readme","repository":{"type":"git","url":"git+https://github.com/evenchange4/react-progressive-bg-image.git"},"gitHead":"cada162c276bafacd20f2a4a6753116b05f0c318","_id":"@amilajack/react-progressive-bg-image@3.0.2","_nodeVersion":"11.9.0","_npmVersion":"6.8.0","dist":{"integrity":"sha512-9iyCE2NN3EGhN7fa/jr2f++vMPd/fnM8prIrPtddDhjO25fr9iduegp3JP0vp6ajRqGVUw5YlX4wCeyIzOeShw==","shasum":"d5072dbe082b687299a73242f5bd0f5ae2348e38","tarball":"https://registry.npmjs.org/@amilajack/react-progressive-bg-image/-/react-progressive-bg-image-3.0.2.tgz","fileCount":10,"unpackedSize":35206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZ2YgCRA9TVsSAnZWagAAUs4QAITgnnR9abTZs4MiVMe6\nQJYglt5WSOqzA7zgZzuXlFdCV19doKBUFSAyvtQ3qunhItw1yJvSwsvggu0X\nZ/kO7Sy62GEqOg6NpQGdQJLA1yRTY6bZO3tKxHngMrue0P5ZeM/1boM5KCOE\n6nsmJnocaOAZI28ar+Zz99/JW8h2h7B285+l52oxuHsn8ZFUvulZbnsHJMrL\nSF1mMn7ZZ2v6JpMNbxZ/d+G9SsRdX4crrmh7lcRXkymbN9HCqTn9+EVvuCnG\nHXSVWJABGHfuil4/2SZSiCulQcGYxgXISezoxzqy4d4tblI9Ze2oV5pc3Sw/\nluYRXeEduQPpKeoWWuvR71igSdMl2tu/s/rHqbu/nLS4Lw6LwVXEKT7S4pJM\nqM/CMOfD13gugdto0Axw3Jb3fuTPefam43HC5iVhnUZIDsf50u0TzPrjIUNq\nKny54H+ODIyPWEGI0NM57j2MWeudcH9NJjjfDDw223pbcY1v3DkANOJoAZ3M\nuhhn6rRVVpoWwtbSaVFqpxd9QA2qfer0cCfnxoG6ymCBEuJCRsL3NKkwxYFb\nKeMVBtGcVdqNTE7A1uFtv/UTXJ9lNQfruvZgVn7rHbIGhVki72sxCVZBQ7mH\nqKub2fbhVH2tGyxE8nNkXN1uRm/PnVFBduSLN4sKIHTlsCN+cnnPP7fOPKMy\noRZy\r\n=G3Gf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDODcTBVif40hGkNqNoxVF/sQCSM9zJQoCIimy52LLN0gIhAIVyd2gLwIP+tjnazYgJOlxFje36pavHObH+gVlljClA"}]},"maintainers":[{"name":"amilajack","email":"amilajack@gmail.com"}],"_npmUser":{"name":"amilajack","email":"amilajack@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-progressive-bg-image_3.0.2_1550280224039_0.7251524950523573"},"_hasShrinkwrap":false}},"time":{"created":"2019-02-15T23:19:37.053Z","3.0.0":"2019-02-15T23:19:37.553Z","modified":"2022-04-04T13:48:48.370Z","3.0.1":"2019-02-16T00:23:15.012Z","3.0.2":"2019-02-16T01:23:44.262Z"},"maintainers":[{"name":"amilajack","email":"amilajack@gmail.com"}],"description":"Medium style progressive background image for React","homepage":"https://github.com/evenchange4/react-progressive-bg-image#readme","repository":{"type":"git","url":"git+https://github.com/evenchange4/react-progressive-bg-image.git"},"author":{"name":"Michael Hsu","email":"evenchange4@gmail.com"},"bugs":{"url":"https://github.com/evenchange4/react-progressive-bg-image/issues","email":"evenchange4@gmail.com"},"license":"MIT","readme":"# react-progressive-bg-image\n\n> Medium style progressive background image for React based on [Styled-components](https://github.com/styled-components/styled-components).\n\n[![Travis][build-badge]][build]\n[![Codecov Status][codecov-badge]][codecov]\n[![npm package][npm-badge]][npm]\n[![npm downloads][npm-downloads]][npm]\n\n[![Dependency Status][dependency-badge]][dependency]\n[![devDependency Status][devdependency-badge]][devdependency]\n[![peerDependency Status][peerdependency-badge]][peerdependency]\n\n[![prettier][prettier-badge]][prettier]\n[![license][license-badge]][license]\n\n## Demo\n\n* https://react-progressive-bg-image.netlify.com/\n* Responsive example: https://michaelhsu.tw/ [[Source code]](https://github.com/evenchange4/michaelhsu.tw/blob/master/src/components/CoverImage.js#L37-L44)\n* Img tag example: https://mcslite.netlify.com/ [[Source code]](https://github.com/MCS-Lite/mcs-lite/blob/master/packages/mcs-lite-landing-web/src/components/BackgroundImage/BackgroundImage.js)\n\n![DEMO](./docs/demo.gif)\n\n## Further Reading:\n\n* [[English] Reproducing Medium Style Progressive Image Loading for React](https://medium.com/@evenchange4/reproducing-medium-style-progressive-image-loading-for-react-2e83bba0c608).\n* [[中文] React Stack 開發體驗與優化策略](https://medium.com/@evenchange4/react-stack-%E9%96%8B%E7%99%BC%E9%AB%94%E9%A9%97%E8%88%87%E5%84%AA%E5%8C%96%E7%AD%96%E7%95%A5-b056da2fa0aa)\n\n## Installation\n\n```sh\n$ yarn add react-progressive-bg-image styled-components\n```\n\n## Requirements\n\n* node >= 9.4.0\n* yarn >= 1.3.2\n\n* react `^16.0.0`,\n* styled-components `^3`\n\n## Usage\n\n### Case 1: Inline-style\n\n> Remind: May need to setup autoprefixer in your project.\n\n```js\nimport ProgressiveImage from 'react-progressive-bg-image';\n\n<ProgressiveImage\n  src={image1}\n  placeholder={image1X60}\n  style={{\n    height: 600,\n    backgroundSize: 'contain',\n    backgroundPosition: 'center center',\n  }}\n/>;\n```\n\n### Case 2: With Styled-components\n\n```js\nimport styled from 'styled-components';\nimport ProgressiveImage from 'react-progressive-bg-image';\n\nconst StyledProgressiveImage = styled(ProgressiveImage)`\n  height: 600px;\n  background-size: contain;\n  background-position: center center;\n`;\n\n<StyledProgressiveImage\n  src={IMAGE}\n  placeholder={IMAGEX60}\n  transition=\"all 1s linear\"\n/>;\n```\n\n## Property\n\n| **Prop**      | **Type** | **Required** | **Description**                     |\n| ------------- | -------- | ------------ | ----------------------------------- |\n| `src`         | string   | yes          | Origin image                        |\n| `placeholder` | string   | yes          | Small image (Suggest inline base64) |\n| `opacity`     | number   |              | default: 0.5                        |\n| `blur`        | number   |              | default: 20                         |\n| `scale`       | number   |              | default: 1                          |\n| `transition`  | string   |              | default: 'opacity 0.3s linear'      |\n| `component`   | string   |              | default: 'div'                      |\n\n## Test\n\n```\n$ yarn run format\n$ yarn run eslint\n$ yarn run test:watch\n```\n\n## Github release / NPM release\n\n```\n$ npm version patch\n$ git push\n```\n\n---\n\n## Inspiration\n\n* https://github.com/FormidableLabs/react-progressive-image\n* [How Medium does progressive image loading](https://jmperezperez.com/medium-image-progressive-loading-placeholder/)\n\n## CONTRIBUTING\n\n* ⇄ Pull requests and ★ Stars are always welcome.\n* For bugs and feature requests, please create an issue.\n* Pull requests must be accompanied by passing automated tests (`$ yarn run test`).\n\n## [CHANGELOG](CHANGELOG.md)\n\n## [LICENSE](LICENSE)\n\nMIT: [http://michaelhsu.mit-license.org](http://michaelhsu.mit-license.org)\n\n[build-badge]: https://img.shields.io/travis/evenchange4/react-progressive-bg-image/master.svg?style=flat-square\n[build]: https://travis-ci.org/evenchange4/react-progressive-bg-image\n[npm-badge]: https://img.shields.io/npm/v/react-progressive-bg-image.svg?style=flat-square\n[npm]: https://www.npmjs.org/package/react-progressive-bg-image\n[codecov-badge]: https://img.shields.io/codecov/c/github/evenchange4/react-progressive-bg-image.svg?style=flat-square\n[codecov]: https://codecov.io/github/evenchange4/react-progressive-bg-image?branch=master\n[npm-downloads]: https://img.shields.io/npm/dt/react-progressive-bg-image.svg?style=flat-square\n[license-badge]: https://img.shields.io/npm/l/react-progressive-bg-image.svg?style=flat-square\n[license]: http://michaelhsu.mit-license.org/\n[dependency-badge]: https://david-dm.org/evenchange4/react-progressive-bg-image.svg?style=flat-square\n[dependency]: https://david-dm.org/evenchange4/react-progressive-bg-image\n[devdependency-badge]: https://david-dm.org/evenchange4/react-progressive-bg-image/dev-status.svg?style=flat-square\n[devdependency]: https://david-dm.org/evenchange4/react-progressive-bg-image#info=devDependencies\n[peerdependency-badge]: https://david-dm.org/evenchange4/react-progressive-bg-image/peer-status.svg?style=flat-square\n[peerdependency]: https://david-dm.org/evenchange4/react-progressive-bg-image#info=peerDependencies\n[prettier-badge]: https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square\n[prettier]: https://github.com/prettier/prettier\n","readmeFilename":"README.md"}