/fetch-progress

Progress of response for fetch API

Primary LanguageJavaScriptMIT LicenseMIT

Fetch Progress

Progress of response for fetch API. Get progress report of your response called from fetch like percentage, speed, total, transferred, eta and remaining.

Install

npm i fetch-progress

Usage

import fetchProgress method to your project

import fetchProgress from 'fetch-progress

Now use fetchProgress method on your fetch calls, try to put this before using response. You can

fetch(this.props.src)
    .then(
      fetchProgress({
        // implement onProgress method
        onProgress(progress) {
          console.log({ progress });
          // A possible progress report you will get
          // {
          //    total: 3333,
          //    transferred: 3333,
          //    speed: 3333,
          //    eta: 33,
          //    percentage: 33
          //    remaining: 3333,
          // }
        },
      })
    )

Example

import fetchProgress from '../index';

const self = this;
    fetch(this.props.src)
      .then(
        fetchProgress({
          onProgress(progress) {
            self.setState({ progress });
          },
          onError(err) {
            console.log(err);
          },
        })
      )
      .then(r => r.blob())
      .then(src => {
        this.src = URL.createObjectURL(src);
        this.setState({
          loaded: true,
        });
      });

Demo

Live Demo

Clone this repo and run npm i and npm run dev which will start a server or you can see examples/ folder in this repo.