├── .babelrc ├── .eslintrc.js ├── .flowconfig ├── .gitignore ├── .npmignore ├── .travis.yml ├── README.md ├── __tests__ └── index.js ├── demo ├── app.js ├── index.html ├── inline.js └── webpack.config.js ├── package.json ├── prettier.config.js ├── src ├── index.d.ts └── index.js ├── webpack.config.umd.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"], 4 | "plugins": [ 5 | "@babel/plugin-proposal-class-properties", 6 | "@babel/plugin-proposal-object-rest-spread" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "extends": [ 3 | "plugin:flowtype/recommended", 4 | "plugin:react/recommended", 5 | "prettier", 6 | "prettier/flowtype", 7 | "prettier/react" 8 | ], 9 | "plugins": [ 10 | "flowtype", 11 | "react", 12 | "prettier" 13 | ], 14 | "parserOptions": { 15 | "sourceType": "module", 16 | "ecmaFeatures": { 17 | "jsx": true 18 | } 19 | }, 20 | "env": { 21 | "es6": true, 22 | "node": true 23 | }, 24 | "rules": { 25 | "prettier/prettier": "error" 26 | } 27 | } -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [libs] 2 | 3 | [ignore] 4 | .*/node_modules/fbjs.* 5 | .*/node_modules/* 6 | 7 | [include] 8 | index.js 9 | 10 | [options] 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | dist.js 4 | umd 5 | .DS_Store 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | demo 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | - "8" 5 | dist: trusty # needs Ubuntu Trusty 6 | sudo: false # no need for virtualization. 7 | script: 8 | - yarn test -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Progressive Image 2 | 3 | [![Maintenance Status][maintenance-image]](#maintenance-status) 4 | 5 | [`react-progressive-image`](https://www.npmjs.com/package/react-progressive-image) React component for progressive image loading 6 | 7 | ### Install 8 | 9 | ```bash 10 | $ yarn add react-progressive-image 11 | ``` 12 | 13 | The UMD build is also available on [unpkg](https://unpkg.com): 14 | 15 | ```html 16 | 17 | ``` 18 | 19 | If you use the UMD build you can find the library on `window.ReactProgressiveImage`. 20 | 21 | ### Examples 22 | 23 | #### Simple 24 | 25 | ```jsx 26 | 27 | {src => an image} 28 | 29 | ``` 30 | 31 | #### With Delay 32 | 33 | ```jsx 34 | 39 | {src => an image} 40 | 41 | ``` 42 | 43 | #### With loading argument 44 | 45 | ```jsx 46 | 47 | {(src, loading) => ( 48 | an image 49 | )} 50 | 51 | ``` 52 | 53 | #### With srcSet 54 | 55 | ```jsx 56 | 64 | {(src, _loading, srcSetData) => ( 65 | an image 71 | )} 72 | 73 | ``` 74 | 75 | #### Component As Placeholder 76 | 77 | If you want to use a component, such as a loading spinner, as a placeholder, you can make use of the `loading` argument in the render callback. It will be true while the main image is loading and false once it has fully loaded. Keep in mind that the `placeholder` props is `required`, so you will need to explicitly declare an empty string as it's value if you plan on using a component in the render callback. 78 | 79 | ```jsx 80 | const dominantImageColor = '#86356B'; 81 | const placeholder = ( 82 |
85 | ); 86 | 87 | 88 | {(src, loading) => { 89 | return loading ? placeholder : an image; 90 | }} 91 | ; 92 | ``` 93 | 94 | #### Progressive Enhancement and No JavaScript 95 | 96 | Since this component relies on JavaScript to replace the placeholder src with the full image src, you should use a fallback image if your application supports environments that do not have JavaScript enabled or is progressively enhanced. 97 | 98 | You can do this by adding the fallback image inside of a `