https://github.com/the-bugging/react-use-downloader
Creates a download handler function and gives progress information
https://github.com/the-bugging/react-use-downloader
anchor cancellable download downloader fetch hook link percentage react
Last synced: 7 months ago
JSON representation
Creates a download handler function and gives progress information
- Host: GitHub
- URL: https://github.com/the-bugging/react-use-downloader
- Owner: the-bugging
- License: mit
- Created: 2021-02-21T01:33:49.000Z (over 4 years ago)
- Default Branch: develop
- Last Pushed: 2025-03-10T15:02:55.000Z (8 months ago)
- Last Synced: 2025-04-06T03:04:13.293Z (7 months ago)
- Topics: anchor, cancellable, download, downloader, fetch, hook, link, percentage, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-use-downloader
- Size: 106 MB
- Stars: 86
- Watchers: 2
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-use-downloader
> Creates a download handler function with its progress information and cancel ability.
[](https://www.npmjs.com/package/react-use-downloader)
---
| Statements | Branches | Functions | Lines |
| ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
|  |  |  |  |
## Table of Contents
- [Running example](#running-example)
- [Install](#install)
- [Usage](#usage)
- [Documentation](#documentation)
- [License](#license)
---
## Running example
| Plain |
| --------------------------------------------------------------- |
|  |
| [Preview!](https://codesandbox.io/s/react-use-downloader-0zzoq) |
---
## Install
```bash
npm install --save react-use-downloader
```
---
## Usage
```jsx
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://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';
const filename = 'beautiful-carpathia.jpg';
return (
Download is in {isInProgress ? 'in progress' : 'stopped'}
download(fileUrl, filename)}>
Click to download the file
cancel()}>Cancel the download
Download size in bytes {size}
Downloading progress:
Elapsed time in seconds {elapsed}
{error && possible error {JSON.stringify(error)}
}
);
}
```
---
## 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, overrideOptions?: UseDownloaderOptions) |
| cancel | cancel function handler | n/a |
| error | error object from the request | n/a |
| isInProgress | boolean denoting download status | n/a |
```jsx
const { size, elapsed, percentage, download, cancel, error, isInProgress } =
useDownloader();
```
`useDownloader(options?: UseDownloaderOptions)` also accepts fetch's RequestInit options:
- Ex.:
```jsx
const { download } = useDownloader({
mode: 'no-cors',
credentials: 'include',
headers: {
Authorization: 'Bearer TOKEN',
},
});
```
---
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Eric Semeniuc
🤔
davdi1337
💻 🐛
Mauro Stepanoski
🤔 💻
Sam "Betty" McKoy
🐛
Peran Osborn
🐛 🤔
Marcos
🐛 🤔
9swampy
🐛 💻
Dave Carlson
🤔
Phil Taylor
🚧
Marc Römmelt
🤔 💻
nik-webdevelop
🤔
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
---
## License
react-use-downloader is [MIT licensed](./LICENSE).
---
This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).