React Progressive Image

[npm-badge]: https://img.shields.io/npm/v/react-context-emission.svg?style=flat-square
[npm]: https://www.npmjs.com/package/react-context-emission

react-progressive-image React component for progressive image loading

$3

``bash
$ yarn add react-progressive-image
`

The UMD build is also available on unpkg:

`html

`

If you use the UMD build you can find the library on window.ReactProgressiveImage.

$3

#### Simple

`jsx

{src => }

`

#### With Delay

`jsx
delay={3000}
src="large-image.jpg"
placeholder="tiny-image.jpg"
>
{src => }

`

#### With loading argment

`jsx

{(src, loading) => (

)}

`

#### With srcSet

`jsx
src="medium.jpg"
srcSetData={{
srcSet: 'small.jpg 320w, medium.jpg 700w, large.jpg 2000w',
sizes: '(max-width: 2000px) 100vw, 2000px'
}}
placeholder="tiny-image.jpg"
>
{(src, _loading, srcSetData) => (
src={src}
srcSet={srcSetData.srcSet}
sizes={srcSetData.sizes}
alt="an image"
/>
)}

`

$3

| 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 |