zzarcon / react-progressive-img

Progressive image rendering made easy 🔮

react-progressive-img

Progressive image rendering made easy

Demo

https://zzarcon.github.io/react-progressive-img

# Install

$ yarn add react-progressive-img

Usage

default

import ProgressiveImg from 'react-progressive-img';

<ProgressiveImg
  src="https://your-site/some-image.png" 
/>

all props

import ProgressiveImg from 'react-progressive-img';

<ProgressiveImg
  src="https://your-site/some-image.png"
  dimensions={{width: '100%', height: 150}}
/>

render props

import ProgressiveImg from 'react-progressive-img';

<ProgressiveImg src="https://your-site/some-image.png" >
  {(state, percentage, src) => {
    if (state === 'error') {
      return <div>Error</div>;
    } else if (state === 'complete') {
      return <img src={src} />;
    } else {
      return <div>Loading {percentage}%</div>;
    }
  }}