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

| Parametter | Description | Required | |----------|----------|----------| | src | Target URL that will be managed the load like a thumbnail | true | | placeholder | The lightest resource's url | true | | fallback | The heaviest resource's url | false | | delay | Delay time in milliseconds to load initially resources (src) | false | | maxIntents | Max number of intents to load src | false | | retryInterval | Time in milliseconds to await before reload src | false |