react-progressive-image-loader v0.0.3

react-progressive-image-loader

React component to create images with different resolutions progressively as Medium or Pinterest does

Pure React Implementation

import ImageLoader from 'react-progressive-image-loader';

<ImageLoader
  src="/thumbnail.png"
  placeholder="/icon.png"
  fallback="/large_image.jpg"
  retryInterval={3000}
  maxIntents={3}
  delay={3000}
>
  {({ src, retry }) => (
    <img
      src={src}
      alt="Image Name"
      width={100}
      height={100}
      onClick={() => { retry() }}
    />
  )}
</ImageLoader>

NextJS SSR Implementation

Probably you need to load the library dynamically in Next disabling SSR

import dynamic from 'next/dynamic';

const ImageLoader = dynamic(async () => await import('react-progressive-image-loader'), {
  ssr: false,
});

// ...rest of code

Parametters