React Progressive Image
react-progressive-image
React component for progressive image loading
Install
$ yarn add react-progressive-image
The UMD build is also available on unpkg:
If you use the UMD build you can find the library on window.ReactProgressiveImage
.
Examples
Simple
<ProgressiveImage ="large-image.jpg" ="tiny-image.jpg"> <img = ="an image" /></ProgressiveImage>
With Delay
<ProgressiveImage = ="large-image.jpg" ="tiny-image.jpg"> <img = ="an image" /></ProgressiveImage>
With loading argment
<ProgressiveImage ="large-image.jpg" ="tiny-image.jpg"> src loading <img = = ="an image" /> </ProgressiveImage>
With srcSet
<ProgressiveImage ="medium.jpg" = ="tiny-image.jpg"> src _loading srcSetData <img = = = ="an image" /> </ProgressiveImage>
Props
Name | Type | Required | Description |
---|---|---|---|
children | function |
true |
returns src , loading , and srcSetData |
delay | number |
false |
time in milliseconds before src image is loaded |
onError | function |
false |
returns error event |
placeholder | string |
true |
the src of the placeholder image |
src | string |
true |
the src of the main image |
srcSetData | {srcSet: "string", sizes: "string" } |
false |
srcset and sizes to be applied to the image |