use-fetch-image v1.0.3

use-fetch-image

React hook for fetch an image with the download percentage.

Demo

Install

Yarn

yarn add use-fetch-image

NPM

npm install use-fetch-image

Usage

import { useImage } from "use-fetch-image";

export default () => {
  const url = 'https://picsum.photos/400/300';  // demo picture
  const [ image, status, progress ] = useImage(url);

  return (!!image && status === 'loaded') ? (
    <img src={image.src} alt="use-image" />
  ) : (
    <div>Loading... ({(progress * 100) << 0}%)</div>
  );
}

API

Note\ progress calculation depends on the content-length value in the HTTP header.\ Some image servers will not set content-length in the HTTP header when responding.\ At this time, the progress will be set to 1 when the download status is "loaded".

Note\ This hook is fully compatible with use-image in konvajs.

License

MIT