Allow rootRef/inputRef to be passed into useDropzone

• 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.

[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.