Skip to content

the-bugging/react-use-downloader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

react-use-downloader

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

NPM


Statements Branches Functions Lines
Statements Branches Functions Lines

Table of Contents


Running example

Plain
Example
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://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 (
    <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>
  );
}

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
const { size, elapsed, percentage, download, cancel, error, isInProgress } =
  useDownloader();

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

  • Ex.:
const { download } = useDownloader({
  mode: 'no-cors',
  credentials: 'include',
  headers: {
    Authorization: 'Bearer TOKEN',
  },
});

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Eric Semeniuc
Eric Semeniuc

πŸ€”
davdi1337
davdi1337

πŸ’» πŸ›
Mauro Stepanoski
Mauro Stepanoski

πŸ€” πŸ’»
Sam
Sam "Betty" McKoy

πŸ›
Peran Osborn
Peran Osborn

πŸ› πŸ€”
Marcos
Marcos

πŸ› πŸ€”
9swampy
9swampy

πŸ› πŸ’»
Dave Carlson
Dave Carlson

πŸ€”

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.