the-bugging / react-use-downloader Goto Github PK

Describe the bug
Im always get Invalid Hook Call error in version 1.1.7
Tried to use in CodeSandbox and with older versions working with no problems, but in 1.1.7 doesn't really wants to work.
Copied exactly the same code from this GitHub page, and still get invalid hook call error, so i don't really know what should i do with this

Additional context
A quick screenshot about my problem

Describe the bug
When building with esbuild, I get the following error: ReferenceError: process is not defined.

To Reproduce
Steps to reproduce the behavior:

1. create a sample app with esbuild
2. add your component
3. See error

Additional context

update to

 const debugMode = process?.env?.REACT_APP_DEBUG_MODE

This is the source:

const { size, elapsed, percentage, download, cancel, error, isInProgress } =
    useDownloader({
     //  mode: 'no-cors'
    });

  const fileUrl = 'https://sample-videos.com/img/Sample-jpg-image-30mb.jpg';
  const filename = 'beautiful-carpathia.jpg';

with mode: 'no-cors' - I get opaque, like this

any ideas?

When downloading from a slow backend, the request will time out. Eg. backend takes 10 seconds to generate a file, then react-use-downloader will stop at ~3 seconds

Having an optional flag, such as download(fileUrl, filename, timeout) would be great. For example, timeout could default to 3 seconds, but can be manually overridden

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I need to allow download links from another domain. I am getting this error: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource". It can be fixed by passing "mode: no-cors" to fetch.

If the link need any OAuth Token, or Cookie Token, it must allow passing the Authorization Header, and/or HTTP-Only Cookies.

Describe the solution you'd like
A clear and concise description of what you want to happen.

CORS: It can be fixed by passing "mode: no-cors" to fetch. So you could add a "fetchProps" attribute (fetchProps={{ mode: 'no-cors' }}.
Authorization: It can be fixed by passing "authorization: token" to fetch. So you could add a "fetchProps" attribute (fetchProps={{ credentials: 'include', authToken: token }}.

installing version 1.2.3 seems to be missing the dist directory, if i fall back to 1.2.2 it works fine.

Hi, is it possible that header are not passing to the request?
useDownloader({
mode: 'no-cors',
headers: {
'access-control-allow-origin': 'http://localhost:3000',
'access-control-allow-methods': 'PUT, GET, HEAD, POST, DELETE, OPTIONS',
},
});

because I cant see those, and also a I receive an opaque response :(

Thanks!

Describe the bug
If Fetch RequestInit ...options supplied then the default method: GET overrides supplied.

To Reproduce
Attempt to provide a body; download will error because you can't GET with a body.
useDownloader( { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(''), }

I'm still getting the process is not defined error using 1.2.5.

Implementing akin to how MarcoRS had proposed fixes for me

          still errors when it tries to access process. This worked for me : 

  let debugMode = false;
  try {
    if (process) {
      debugMode = !!process?.env?.REACT_APP_DEBUG_MODE;
    }
  } catch (err) {
    //Your error handling
  }

Originally posted by @MarcosRS in #17 (comment)

Is your feature request related to a problem? Please describe.

Currently, you can only to pass options.headers on first render.
This makes it impossible to 'update' things such as the token, if required.

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
setOptions() to update the stored options:
eg:

setOptions({
...options,
headers: {
  Authorization: 'Bearer anUpdatedToken`
}

Describe alternatives you've considered
Right now, I have to wrap my component in another component that async gets the bearer token.

Additional context
Add any other context or screenshots about the feature request here.