react-use-downloader

react-use-downloader

Creates a download handler function with its progress information and cancel ability.

---

Table of Contents

• Running example
• Install
• Usage
• Documentation
• License

---

Running example

Plain
Preview!

---

Install

npm install --save react-use-downloader

---

Usage

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

export default function App() {
  const {
    size,
    elapsed,
    percentage,
    download,
    cancel,
    error,
    isInProgress
  } = useDownloader();

  const fileUrl = "https://olavoparno.github.io/saywololo/sounds/Wololo1.wav";

  return (
    <div className="App">
      {isInProgress ? (
        <p>Download is in progress</p>
      ) : (
        <p>Download is stopped</p>
      )}
      <button onClick={() => download(fileUrl, "file")}>
        Click to download file
      </button>
      <span> </span>
      <button onClick={() => cancel()}>Cancel</button>
      <p>
        Download size {size} bytes and {percentage}%
      </p>
      <LinearProgress variant="determinate" value={percentage} />
      <p>Elapsed time {elapsed}s</p>
      {error && <p>possible error {JSON.stringify(error)}</p>}
    </div>
  );
}

---

Documentation

useDownloader() returns:

• An object with the following keys:

  1. size (size in bytes)
  2. elapsed (in seconds)
  3. percentage (a percentage string)
  4. download (a download function handler)
  • arguments, both as string: {downloadUrl, filename}
  1. cancel (a cancel function)
  2. error (an error object from the fetch request)
  3. isInProgress (a boolean status wether it is downloading or not)

const {
    size,
    elapsed,
    percentage,
    download,
    cancel,
    error,
    isInProgress
  } = useDownloader();

---

License

react-use-downloader is MIT licensed.

---

This hook is created using create-react-hook.