{"id":24211383,"url":"https://github.com/the-bugging/react-use-downloader","last_synced_at":"2025-04-13T06:19:25.045Z","repository":{"id":40562204,"uuid":"340792717","full_name":"the-bugging/react-use-downloader","owner":"the-bugging","description":"Creates a download handler function and gives progress information","archived":false,"fork":false,"pushed_at":"2025-03-10T15:02:55.000Z","size":111155,"stargazers_count":86,"open_issues_count":1,"forks_count":9,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-04-06T03:04:13.293Z","etag":null,"topics":["anchor","cancellable","download","downloader","fetch","hook","link","percentage","react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-use-downloader","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/the-bugging.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["the-bugging"]}},"created_at":"2021-02-21T01:33:49.000Z","updated_at":"2025-03-10T15:02:45.000Z","dependencies_parsed_at":"2023-02-06T07:30:45.264Z","dependency_job_id":"0efa29df-bfbf-44ab-b9ea-58361f5a2b55","html_url":"https://github.com/the-bugging/react-use-downloader","commit_stats":{"total_commits":73,"total_committers":4,"mean_commits":18.25,"dds":0.1643835616438356,"last_synced_commit":"6a55c9ac65e5780fcaa94be2f5e8e627ba11ab5e"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-bugging%2Freact-use-downloader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-bugging%2Freact-use-downloader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-bugging%2Freact-use-downloader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-bugging%2Freact-use-downloader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/the-bugging","download_url":"https://codeload.github.com/the-bugging/react-use-downloader/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670807,"owners_count":21142963,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["anchor","cancellable","download","downloader","fetch","hook","link","percentage","react"],"created_at":"2025-01-14T02:35:04.393Z","updated_at":"2025-04-13T06:19:25.011Z","avatar_url":"https://github.com/the-bugging.png","language":"TypeScript","funding_links":["https://github.com/sponsors/the-bugging"],"categories":[],"sub_categories":[],"readme":"# react-use-downloader\n\n\u003e Creates a download handler function with its progress information and cancel ability.\n\n[![NPM](https://img.shields.io/npm/v/react-use-downloader.svg)](https://www.npmjs.com/package/react-use-downloader)\n\n---\n\n| Statements                                                                                      | Branches                                                                                 | Functions                                                                                     | Lines                                                                                 |\n| ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |\n| ![Statements](https://img.shields.io/badge/statements-86.44%25-yellow.svg?style=flat\u0026logo=jest) | ![Branches](https://img.shields.io/badge/branches-68.62%25-red.svg?style=flat\u0026logo=jest) | ![Functions](https://img.shields.io/badge/functions-77.14%25-red.svg?style=flat\u0026logo=jest) | ![Lines](https://img.shields.io/badge/lines-86.91%25-yellow.svg?style=flat\u0026logo=jest) |\n\n## Table of Contents\n\n- [Running example](#running-example)\n- [Install](#install)\n- [Usage](#usage)\n- [Documentation](#documentation)\n- [License](#license)\n\n---\n\n## Running example\n\n| Plain                                                           |\n| --------------------------------------------------------------- |\n| ![Example](./assets/readme.gif)                                 |\n| [Preview!](https://codesandbox.io/s/react-use-downloader-0zzoq) |\n\n---\n\n## Install\n\n```bash\nnpm install --save react-use-downloader\n```\n\n---\n\n## Usage\n\n```jsx\nimport React from 'react';\nimport useDownloader from 'react-use-downloader';\n\nexport default function App() {\n  const { size, elapsed, percentage, download, cancel, error, isInProgress } =\n    useDownloader();\n\n  const fileUrl =\n    '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';\n  const filename = 'beautiful-carpathia.jpg';\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cp\u003eDownload is in {isInProgress ? 'in progress' : 'stopped'}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e download(fileUrl, filename)}\u003e\n        Click to download the file\n      \u003c/button\u003e\n      \u003cbutton onClick={() =\u003e cancel()}\u003eCancel the download\u003c/button\u003e\n      \u003cp\u003eDownload size in bytes {size}\u003c/p\u003e\n      \u003clabel for=\"file\"\u003eDownloading progress:\u003c/label\u003e\n      \u003cprogress id=\"file\" value={percentage} max=\"100\" /\u003e\n      \u003cp\u003eElapsed time in seconds {elapsed}\u003c/p\u003e\n      {error \u0026\u0026 \u003cp\u003epossible error {JSON.stringify(error)}\u003c/p\u003e}\n    \u003c/div\u003e\n  );\n}\n```\n\n---\n\n## Documentation\n\n`useDownloader()` returns:\n\n- An object with the following keys:\n\n| key          | description                      | arguments                                                                                         |\n| ------------ | -------------------------------- | ------------------------------------------------------------------------------------------------- |\n| size         | size in bytes                    | n/a                                                                                               |\n| elapsed      | elapsed time in seconds          | n/a                                                                                               |\n| percentage   | percentage in string             | n/a                                                                                               |\n| download     | download function handler        | (downloadUrl: string, filename: string, timeout?: number, overrideOptions?: UseDownloaderOptions) |\n| cancel       | cancel function handler          | n/a                                                                                               |\n| error        | error object from the request    | n/a                                                                                               |\n| isInProgress | boolean denoting download status | n/a                                                                                               |\n\n```jsx\nconst { size, elapsed, percentage, download, cancel, error, isInProgress } =\n  useDownloader();\n```\n\n`useDownloader(options?: UseDownloaderOptions)` also accepts fetch's RequestInit options:\n\n- Ex.:\n\n```jsx\nconst { download } = useDownloader({\n  mode: 'no-cors',\n  credentials: 'include',\n  headers: {\n    Authorization: 'Bearer TOKEN',\n  },\n});\n```\n\n---\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://semeniuc.ml/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/3838856?v=4?s=100\" width=\"100px;\" alt=\"Eric Semeniuc\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEric Semeniuc\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-esemeniuc\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/davdi1337\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/66253422?v=4?s=100\" width=\"100px;\" alt=\"davdi1337\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003edavdi1337\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/the-bugging/react-use-downloader/commits?author=davdi1337\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/the-bugging/react-use-downloader/issues?q=author%3Adavdi1337\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://heliusit.net\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/7851219?v=4?s=100\" width=\"100px;\" alt=\"Mauro Stepanoski\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMauro Stepanoski\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-mastepanoski\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/the-bugging/react-use-downloader/commits?author=mastepanoski\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://bzbetty.blogspot.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/533131?v=4?s=100\" width=\"100px;\" alt=\"Sam \u0026quot;Betty\u0026quot; McKoy\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSam \u0026quot;Betty\u0026quot; McKoy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/the-bugging/react-use-downloader/issues?q=author%3Abzbetty\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/peranosborn\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1318002?v=4?s=100\" width=\"100px;\" alt=\"Peran Osborn\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePeran Osborn\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/the-bugging/react-use-downloader/issues?q=author%3Aperanosborn\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#ideas-peranosborn\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/MarcosRS\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/12486814?v=4?s=100\" width=\"100px;\" alt=\"Marcos\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMarcos\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/the-bugging/react-use-downloader/issues?q=author%3AMarcosRS\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#ideas-MarcosRS\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/9swampy\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/523054?v=4?s=100\" width=\"100px;\" alt=\"9swampy\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003e9swampy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/the-bugging/react-use-downloader/issues?q=author%3A9swampy\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/the-bugging/react-use-downloader/commits?author=9swampy\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/davecarlson\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/299702?v=4?s=100\" width=\"100px;\" alt=\"Dave Carlson\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDave Carlson\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-davecarlson\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://moa-crypto.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1455736?v=4?s=100\" width=\"100px;\" alt=\"Phil Taylor\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePhil Taylor\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#maintenance-ruru-ink\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/MarcRoemmelt\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/36316710?v=4?s=100\" width=\"100px;\" alt=\"Marc Römmelt\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMarc Römmelt\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-MarcRoemmelt\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/the-bugging/react-use-downloader/commits?author=MarcRoemmelt\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/nik-webdevelop\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/10981702?v=4?s=100\" width=\"100px;\" alt=\"nik-webdevelop\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003enik-webdevelop\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-nik-webdevelop\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n---\n\n## License\n\nreact-use-downloader is [MIT licensed](./LICENSE).\n\n---\n\nThis hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-bugging%2Freact-use-downloader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthe-bugging%2Freact-use-downloader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-bugging%2Freact-use-downloader/lists"}