[](#contributors-)

react-use-downloader

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

---

Statements	Branches	Functions	Lines

Table of Contents

• Running example
• Install
• Usage
• Documentation
• License

---

Running example

Plain
Preview!

You may find another example in this project which are served at Github Pages.

---

Install

1npm install --save react-use-downloader

---

Usage

1import React from "react";
2import useDownloader from "react-use-downloader";
3
4export default function App() {
5  const { size, elapsed, percentage, download, cancel, error, isInProgress } =
6    useDownloader();
7
8  const fileUrl =
9    "https://upload.wikimedia.org/wikipedia/commons/4/4d/%D0%93%D0%BE%D0%B2%D0%B5%D1%80%D0%BB%D0%B0_%D1%96_%D0%9F%D0%B5%D1%82%D1%80%D0%BE%D1%81_%D0%B2_%D0%BF%D1%80%D0%BE%D0%BC%D1%96%D0%BD%D1%8F%D1%85_%D0%B2%D1%80%D0%B0%D0%BD%D1%96%D1%88%D0%BD%D1%8C%D0%BE%D0%B3%D0%BE_%D1%81%D0%BE%D0%BD%D1%86%D1%8F.jpg";
10  const filename = "beautiful-carpathia.jpg";
11
12  return (
13    <div className="App">
14      <p>Download is in {isInProgress ? "in progress" : "stopped"}</p>
15      <button onClick={() => download(fileUrl, filename)}>
16        Click to download the file
17      </button>
18      <button onClick={() => cancel()}>Cancel the download</button>
19      <p>Download size in bytes {size}</p>
20      <label for="file">Downloading progress:</label>
21      <progress id="file" value={percentage} max="100" />
22      <p>Elapsed time in seconds {elapsed}</p>
23      {error && <p>possible error {JSON.stringify(error)}</p>}
24    </div>
25  );
26}

---

Documentation

useDownloader() returns:

• An object with the following keys:

key	description	arguments
size	size in bytes	n/a
elapsed	elapsed time in seconds	n/a
percentage	percentage in string	n/a
download	download function handler	(downloadUrl: string, filename: string, timeout?: number)
cancel	cancel function handler	n/a
error	error object from the request	n/a
isInProgress	boolean denoting download status	n/a

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

useDownloader(options?: UseDownloaderOptions) also accepts fetch's RequestInit options:

• Ex.:

1const { download } = useDownloader({
2  mode: "no-cors",
3  credentials: "include",
4  headers: {
5    Authorization: "Bearer TOKEN",
6  },
7});

---

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Eric Semeniuc 🤔

davdi1337 💻 🐛

Mauro Stepanoski 🤔 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

---

License

react-use-downloader is MIT licensed.

---

This hook is created using create-react-hook.