React-dropzone: Allow rootRef/inputRef to be passed into useDropzone

[0xdevalias]

• [x] I want to propose a feature

What is the current behavior?

The docs state:

Important: do not set the ref prop on the elements where getRootProps()/getInputProps() props are set, instead, get the refs from the hook itself

In the code, rootRef and inputRef are defined and defaulted inside the hook:
https://github.com/react-dropzone/react-dropzone/blob/951ecb2a03b16e192a2b0b4c8ca3d7d06061a9f1/src/index.js#L391-L392

This is fine within the scope of the component directly using dropzone, but if an external (eg. parent) component wants to pass in a ref.. suddenly we need to resort to 'syncing logic', rather than being able to just use the same ref, eg.:

const dropzone = useDropzone()
const { ref: containerRef } = dropzone.getRootProps()

useEffect(
    () => {
      if (containerRef.current !== forwardedRef.current) {
        forwardedRef.current = containerRef.current
      }
    },
    [forwardedRef, containerRef]
  )

What is the expected behavior?

It would be nice to be able to pass in our own refs, and have dropzone use them as it's internal refs.

eg.

const dropzone = useDropzone({
  rootRef: myRootRef,
  inputRef: myInputRef,
})

Obviously, if we don't pass any in, then it should default them.

If this is a feature request, what is motivation or use case for changing the behavior?

Mostly described above, but basically the workflow is a bit janky feeling currently if we want to sync with externally provided refs.

[rolandjitsu]

@0xdevalias feel free to make a PR.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity in the past 60 days. It will be closed if no further activity occurs. If the problem persists please comment here to bump your issue. Thank You - React Dropzone Maintaners

[vlvereta]

Hi there! Is anyone working on this feature? Or, maybe it's already implemented somehow?
I'm totally tired trying to find a perfect shape solution for passing ref from outside (parent component) into Dropzone (child component) using hooks (useDropzone) 😓
I think it would be great to have such a possibility as above ☝️

[smelllllllllll]

From an accessibility point of view it would be useful to be able to access the rootRef so you can dyamicaly return focus to it after closing a modal.