Download Handler Function In React – use-downloader

The react-use-downloader helps you create a download handler function with its progress information and cancel ability.

How to use it:

1. Install and import:

# NPM

$ npm i react-use-downloader

import React from "react";
import useDownloader from "react-use-downloader";

2. This is an example app showing how to create a download handler function.

export default function App() {
  const {
    size,
    elapsed,
    percentage,
    download,
    cancel,
    error,
    isInProgress
  } = useDownloader();
  const fileUrl = "/path/to/file/";
  return (
    <div className="App">
      <p>Download is in {isInProgress ? 'in progress' : 'stopped'}</p>
      <button onClick={() => download(fileUrl, "filename")}>
        Click to download the file
      </button>
      <button onClick={() => cancel()}>Cancel the download</button>
      <p>
        Download size in bytes {size}
      </p>
      <label for="file">Downloading progress:</label>
      <progress id="file" value={percentage} max="100" />
      <p>Elapsed time in seconds {elapsed}</p>
      {error && <p>possible error {JSON.stringify(error)}</p>}
    </div>
  );
}

Preview:

Download Details:

Author: olavoparno

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/olavoparno/react-use-downloader

License: MIT