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.