useFileDownload
Hook to download files by URL with progress tracking and flexible control.
What it should do
- Accept a URL for downloading a file.
- Accept an optional file name.
If not provided, the hook should extract and use the file name from the downloaded file.
- Perform the HTTP request with progress tracking:
- Track and return
progress (0–100).
- Track and return
isLoading (boolean).
- Track and return
status ('success' | 'error').
- Allow optional callbacks:
onSuccess – called when the download completes successfully.
onError – called when the download fails.
onSettled – called after either success or failure.
- Trigger a browser download automatically once the file is fully downloaded.
- Handle large files efficiently using
fetch with streams or XMLHttpRequest for progress.
- Automatically revoke object URLs to avoid memory leaks.
Example from npm
Link: https://www.npmjs.com/package/react-use-downloader
Example usage
const {
downloadFile,
progress,
isLoading,
status,
} = useFileDownload({
url: 'https://example.com/file.pdf',
fileName: 'custom_name.pdf',
onSuccess: () => console.log('Downloaded successfully'),
onError: () => console.log('Download failed'),
onSettled: () => console.log('Download completed'),
});
useFileDownload
Hook to download files by URL with progress tracking and flexible control.
What it should do
If not provided, the hook should extract and use the file name from the downloaded file.
progress(0–100).isLoading(boolean).status('success' | 'error').onSuccess– called when the download completes successfully.onError– called when the download fails.onSettled– called after either success or failure.fetchwith streams orXMLHttpRequestfor progress.Example from npm
Link: https://www.npmjs.com/package/react-use-downloader
Example usage