/react-async-image

ReactJS 'img' tag rendering with loading styles, async decoding and error fallback.

Primary LanguageTypeScriptMIT LicenseMIT

react-async-image

ReactJS 'img' tag rendering with loading styles, async decoding and error fallback.

Note: required React v16.8+

Install

npm i -S react-async-image

Usage

import Image from 'react-async-image';
const images = ['./images/picture1.jpg', './images/picture2.png'];

<div className="wrapper">
  {images.map((src, index) => (
    <div key={index} style={{ width: 100, height: 100 }}>
      <Image
        src={src}
        className="image"
        placeholder={<div className="placeholder">oops</div>}
      />
    </div>
  ))}
</div>
.image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity .5s;
}

.image-loading {
  opacity: 0;
  transition: none;
}

Props

name description type default
src The image URL string
alt? An alternative text description of the image string
decoding? Decoding hint to the browser auto | sync | async async
loading? auto | eager | lazy lazy
className? CSS class of the image string async-image
placeholder? A fallback element if the image could be loaded React.ReactNode | string