React Image Async

A render prop component to get an image loading status.

Installation

npm install react-image-async

or

yarn add react-image-async

How it works

This library offers a render prop component that exposes the loading status of one or multiple images. It is useful for error handling and graceful image rendering.

Example (single image):

import React from "react";
import ImageAsync from "react-image-async";
 
const SRC =
  "https://www.tesla.com/sites/default/files/images/software_update.jpg";
export default () => (
  <ImageAsync src={SRC}>
    {({ loaded, error }) =>
      loaded ? <img src={SRC} /> : <div>Loading...</div>
    }
  </ImageAsync>
);

Example (multiple images):

import React from "react";
import ImageAsync from "react-image-async";
 
const SRC =
  "https://www.tesla.com/sites/default/files/images/software_update.jpg";
const SRC_2 =
  "https://www.tesla.com/sites/default/files/images/homepage/20180710/ms/homepage-models.jpg?20181117";
export default () => (
  <ImageAsync src={[SRC, SRC_2]}>
    {({ loaded, error }) =>
      loaded ? (
        <React.Fragment>
          <img src={SRC} />
          <img src={SRC_2} />
        </React.Fragment>
      ) : (
        <div>Loading...</div>
      )
    }
  </ImageAsync>
);