The react-use-downloader helps you create a download handler function with its progress information and cancel ability.
1. Install and import:
# NPM
$ npm i react-use-downloaderimport 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>
);
}
Author: olavoparno
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/olavoparno/react-use-downloader
License: MIT