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):
;; const SRC = "https://www.tesla.com/sites/default/files/images/software_update.jpg"; <ImageAsync src=SRC> loaded ? <img src=SRC /> : <div>Loading...</div> </ImageAsync>;
Example (multiple images):
;; 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"; <ImageAsync src=SRC SRC_2> loaded ? <ReactFragment> <img src=SRC /> <img src=SRC_2 /> </ReactFragment> : <div>Loading...</div> </ImageAsync>;